<template>
  <div id="conatainer"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "ceb2dca8dbef74fa299dab5a8d047db9",
};
import Bus from "../GisBus/bus";

export default {
  data() {
    return {
      map: null,
      autoOptions: {
        input: "",
      },
      searchPlaceInput:'', 
      auto: null,
      placeSearch: null,
      district: null,
      polygons: [],
    };
  },
  created() {
    Bus.$on("shareUserIput", (val) => {
      // console.log(val);
      this.autoOptions.input = val.inputId;
      this.searchPlaceInput = val.isuserInput
    });
  },
  watch: {
    searchPlaceInput(newValue) {
      console.log(newValue);
      if (newValue != null) {
        this.placeSearch.search(newValue)
        this.map.setZoom(16, true, 1)
        this.drawBounds(newValue)
      }
    }
  },

  methods: {
    initMap() {
      AMapLoader.load({
        key: "8df0f38ce2e62c368ef9e544ebe3183b", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.HawkEye",
          "AMap.MapType",
          "AMap.AutoComplete",
          "AMap.PlaceSearch",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("conatainer", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [121.473667, 31.230525], //初始化地图中心点位置
          });
          this.map.addControl(new AMap.Scale());
          this.map.addControl(new AMap.ToolBar());
          this.map.addControl(new AMap.HawkEye());
          this.map.addControl(new AMap.MapType());

          this.auto = new AMap.AutoComplete(this.autoOptions);
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map,
          }); //构造地点查询类
          this.auto.on("select", this.select);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    select(e) {
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(e.poi.name); //关键字查询查询
      this.map.setZoom(10,true,1) 
      this.drawBounds(e.poi.name)
    },
    drawBounds(newValue) {
      //加载行政区划插件
      if (!this.district) {
        //实例化DistrictSearch
        var opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: 'all', //返回行政区边界坐标组等具体信息
          level: 'district' //查询行政级别为 市
        }

        this.map.plugin(['AMap.DistrictSearch'], () => {
          this.district = new AMap.DistrictSearch(opts)
        })
        // this.district = new AMap.DistrictSearch(opts)
      }
      //行政区查询
      this.district.search(newValue, (status, result) => {
        console.log(result);
        if (this.polygons != null) {
          this.map.remove(this.polygons) //清除上次结果
          this.polygons = []
        }
        var bounds = result.districtList[0].boundaries
        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            var polygon = new AMap.Polygon({
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.4,
              fillColor: '#80d8ff',
              strokeColor: '#0091ea'
            })
            this.polygons.push(polygon)
          }
        }
        this.map.add(this.polygons)
        this.map.setFitView(this.polygons) //视口自适应
      })
    },

  },
  mounted() {
    this.initMap();
  },
};
</script>


<style scoped lang="less">
#conatainer {
  width: 800px;
  height: 500px;
  border: 1px solid red;
}
</style>
